<?php
	//kết nối database
	
	$connect = mysql_connect("localhost", "root", "") or die("Can not connect to database.");
	
	mysql_select_db("db_mvc");
	
	$sql_result = mysql_query("SELECT * FROM products");
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	#container {
		 margin: 0px;
		 padding: 0px;
		 width:748px;
		 height:auto;
		 position:relative;
		 background:transparent;
	}
	
	#container .pro_main {
		margin: 0px 5px 0px 0px;
		padding: 0px 0px 5px 0px;
		background:#F33;
		float:left;	
		width:364px;
	}
	#container .pro_main .pro_image {
		padding:5px;
	}
	
	#container .pro_main .bt_addcart {
		float:right;
		margin-right: 5px;
		margin-bottom: 5px;		
	}
	
	.clear {
		clear:both;
	}
	
	.add_product {
		cursor:pointer;	
	}
	
	#info_ajax {
		background:#ff6;
		color:#f00;
		min-height:100px;
		width:auto;
		margin:100px auto 0px auto;		
        padding: 10px;        
        display:none;        
	}		 	
</style>
<script type="text/javascript" src="js/jquery-1.4.1.min.js" ></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("div[class^='bt_addcart']").click(function(){
		      
			//alert("Xác nhận sản phẩm có ID: " + this.id);			
			
			//Các yêu cầu cơ bản add sản phẩm ajax            
			
			//Gọi một ajax (là function of jQuery) trong jQuery			
			$ajax({
				//Chọn kiểu truyền dữ liệu sẽ có 2 dạng: POST & GET
				type: "POST",
				
				//Liên kết để ajax gọi đến đích xử lý thông tin
				url: "add_product.php",
				
				//Các thông tin của fields dữ liệu cần xử lý
				data: "id=" + this.id,
				
				//Kiểu dữ liệu truyền đi và nhận về  như: html, xmlDocument, ...
				datatype: "html",
				
				//Thông báo trước khi hoàn thành ajax (quá trình ajax đang trong processing đang load)
				beforeSend: function(){
					$('#info_ajax').css("display", "block");
					$('#info_ajax').html("<img src='images/ajax-loader.gif' alt='LOADING...'/>");
                    $('#info_ajax').fadeIn("fast");
				},
				
				//Thực hiện các yêu cầu sau khi đã hoàn thành load dữ liệu ajax
				success: function(html){
					$('#info_ajax').text('');		//cho text của ajax về rỗng
					$('#info_ajax').append(html);
                    $('#info_ajax').fadeOut(5000);
				}
                
                
			});            							
		});	//Cài đặt thông tin cho Ajax để xử lý các yêu cầu của sản phẩm			
	}); // ready no da xu ly khi load trang		
</script>

</head>

<body>
	<div id="container">
    	<?php
			while ($pro_list = mysql_fetch_array($sql_result)){
		?>
    	<div class="pro_main">
        	<div class="pro_image">
            	<img src="images/<?php echo $pro_list['image'];?>" border="0" height="354px" width="354px" alt=""/>                
            </div><!-- End .pro_image -->	        	
            <div class="bt_addcart" id="<?php echo $pro_list['id']; ?>">            	 
                <img class="add_product" src="images/btn_add_to_cart.jpg" width="177" height="76px" />
            </div><!-- End .bt_addcart -->
        </div><!-- End .pro_main -->
        <?php 
		} ?>
        
        <div class="clear"></div><!-- End .clear -->
        <div id="info_ajax">
        	&nbsp;	
        </div><!-- End #info_ajax -->        
    </div><!-- End #container-->
</body>
</html>